<template>
  <el-container class="tab-bar">
    <!--  图标放置位置  -->
    <el-aside class="logo" width="300px">
      <img :src="logo" alt="">
    </el-aside>

    <!--  网站声明信息  -->
    <el-main>
      <div class="web-message">
        <ul class="message-ul" v-for="item in itemList">
          <p class="msg-title">{{item.title}}</p>
          <li v-for="innerItem in item.list">
            <a :href="innerItem.link">
              {{ innerItem.title }}
            </a>
          </li>
        </ul>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import {reactive} from "vue";

export default {
  name: "TabBar",
  setup() {
    const logo = require("@/static/us.svg")
    const itemList = reactive([{
      title: "声明信息1",
      link: "",
      list: [{
        title: "声明条列1",
        link: ""
      }, {
        title: "声明条列2",
        link: ""
      }, {
        title: "声明条列3",
        link: ""
      },{
        title: "声明条列4",
        link: ""
      }, {
        title: "声明条列5",
        link: ""
      }, {
        title: "声明条列6",
        link: ""
      }]
    }, {
      title: "声明信息2",
      link: "",
      list: [{
        title: "声明条列1",
        link: ""
      }, {
        title: "声明条列2",
        link: ""
      }, {
        title: "声明条列3",
        link: ""
      },{
        title: "声明条列4",
        link: ""
      }, {
        title: "声明条列5",
        link: ""
      }, {
        title: "声明条列6",
        link: ""
      }]
    }, {
      title: "声明信息3",
      link: "",
      list: [{
        title: "声明条列1",
        link: ""
      }, {
        title: "声明条列2",
        link: ""
      }, {
        title: "声明条列3",
        link: ""
      },{
        title: "声明条列4",
        link: ""
      }, {
        title: "声明条列5",
        link: ""
      }, {
        title: "声明条列6",
        link: ""
      }]
    }])

    return {
      logo,
      itemList
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  height: 400px;

  .logo {
    overflow-y: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .el-main {
    margin-left: 100px;
  }

  .web-message {
    display: flex;

    .msg-title {
      font-weight: bolder;
      font-size: 18px;
    }

    & > .message-ul {
      margin-left: 40px;
      line-height: 2em;
    }
  }
}
</style>